<template>
  <div id="tab-bar-menu">
    <div :key="item.title" v-for="item in tabBarMenu">
      <router-link :to="item.link">
        <i :class="`iconfont ${item.icon}`"></i>
        <span>{{ item.title }}</span>
      </router-link>
    </div>
  </div>
</template>

<script lang="js">
import {defineComponent, reactive, ref} from 'vue'
import {tabBarMenu} from '@/common/local-data'
export default defineComponent({
  setup() {
    return {
      tabBarMenu
    }

  }
})
</script>

<style scoped lang="less">
#tab-bar-menu {
  position: fixed;
  width: 100vw;
  bottom: 0;
  display: flex;
  background-color: white;
  div {
    flex: 1;
    height: 16vw;
    a {
      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #262626;
      font-size: 3vw;
      i {
        font-size: 8vw;
      }
    }
    a.router-link-exact-active {
      background-color: rgb(116, 192, 251);
      border-radius: 10px;
      overflow: hidden;
      color: white;
    }
  }
}
</style>
